<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--父组件模板-->
<div id="app">
 <cpn @itemclick="cpnClick"></cpn>
</div>

<template id="cpn">
  <div>
    <button v-for:="item in categories" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>


<script src="../js/vue%20.js"></script>
<script>
  //子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        //发射
        this.$emit('itemclick',item)
      }
    }
  }

  //父组件
  const app = new Vue({
    el:'#app',
    data:{
     info:{
       name: 'why',
       age: 18,
       height: 1.88
     },
      message: 'aaaaaaaa'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick',item );
      }
    }
  })
</script>
</body>
</html>